<template>
    <div class="search">

        <h3>搜索关键词: <el-tag >{{keyWorld}}</el-tag></h3>


        <div v-if="articleList.length != 0">
        <!--        文章列表-->
        <ArticleList :articleList="articleList"></ArticleList>


        <!--    分页插件-->
        <div  class="block" style="text-align: center; margin-top: 20px">
            <el-pagination
                    @current-change="handleSearchCurrentChange"
                    :current-page.sync="searchPageNum"
                    :page-size="searchPageSize"
                    layout="prev, pager, next, jumper"
                    :total="searchTotal">
            </el-pagination>
        </div>
        </div>
        <div v-if="articleList.length == 0">
            <h3 style="color: #F56C6C">暂无相关文章</h3>
        </div>

    </div>

</template>

<script>


    import https from "../../../https";

    // 导入
    import ArticleList from '../../components/articleList'

    export default {
        name: "search",
        data() {
            return {
                keyWorld:this.$route.params.keyWorld,
                articleList: [],
                searchPageNum:1,
                searchPageSize: 5,
                searchPages: 0,
                searchTotal: 0,

            }
        },
        mounted: function () {
            this.keyWorld = this.$route.params.keyWorld
            this.searchArticleByKeyWorld()
        },
        methods: {

            searchArticleByKeyWorld(){
                const  url = '/article/search/' + this.keyWorld  + '/' + (this.searchPageNum-1) + '/' + this.searchPageSize
                https.fetchGet(url, null).then((res) => {


                    if (res.data.code == 200) {

                        const { data } = res.data

                        this.articleList = data.content //数据
                        this.searchPageNum = parseInt(data.number+1) //当前页
                        this.searchPageSize = parseInt(data.size)    //每页条数
                        this.searchPages = parseInt(data.totalPages)    //总页数
                        this.searchTotal = parseInt(data.totalElements)   //总条数
                    }
                }).catch((err) => {
                    console.log(err);
                })
            },


            /**
             * 搜索分页 触发其他页
             * @param val
             */
            handleSearchCurrentChange() {
                this.searchArticleByKeyWorld();
            },


        },
        components:{ArticleList},
        watch:{
            "$route.params"(newVal,oldVal){
                if (newVal.keyWorld != oldVal.keyWorld){
                    this.keyWorld = newVal.keyWorld
                    this.searchArticleByKeyWorld()
                }
            }
        }
    }
</script>

<style scoped>

</style>
